<?php ?>
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/city.css"/>
		<!--<link rel="stylesheet/less" href="css/vendor-Prefixes.less"/>-->
		<link rel="stylesheet" type="text/css" href="css/sitelogo.css"/>
		<link rel="stylesheet" type="text/css" href="css/font.css"/>
		<link rel="stylesheet" type="text/css" href="css/cropper.min.css"/>
		<title>添加用户</title>
		<style>
			.container{margin-top: 50px;}
			.form-group {
				height: 57px;
			}
			 h1{text-align: center;margin-bottom:20px;text-shadow:0 0 4px #FFF,0 -5px 4px #ff3,2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;}
			.user_pic img{width: 200px;height: 200px;}
		
        .con {
            width: 100%;
            height: 100%;
            overflow: auto;
            clear: both;
            margin: 20px 0;
        }
        
        .z_photo {
            padding: 0.3rem;
            margin: 1rem 1rem;
            border: 1px solid peru;
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap;
        }
        
        .z_photo .z_addImg  img {
            width: 100px;
            height: 100px;
        }
        
       
        
        .z_file {
            width:100px;
            height:100px;
            background: url("img/z_add.png") no-repeat;
            background-size: 100% 100%;
            float: left;
            margin-right: 0.2rem;
            
        }
        
        .z_file input::-webkit-file-upload-button {
            width: 1rem;
            height: 1rem;
            border: none;
            position: absolute;
            outline: 0;
            opacity: 0;
        }
        
        .z_file input#file {
           	display: block;
		    border: 0;
		    vertical-align: middle;
		    width: 100%;
		    height: 100%;
		    opacity: 0;
        }
        /*遮罩层*/
        
        .z_mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            display: none;
        }
        
        .z_alert {
            border-radius: .2rem;
		    background: #fff;
		    font-size: .24rem;
		    text-align: center;
		    position: absolute;
		    left: 50%;
		    top: 50%;
		    margin: auto;
		    padding: 20px;
        }
        
        .z_alert p:nth-child(1) {
            line-height: 1.5rem;
        }
        
        .z_alert p:nth-child(2) span {
            display: inline-block;
            width: 49%;
            height: .5rem;
            line-height: 1.5rem;
            float: left;
            border-top: 1px solid #ddd;
        }
        
        .z_cancel {
            border-right: 1px solid #ddd;
        }
</style>
	</head>
	<body>
	<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">-->
				<form class="avatar-form">
					<div class="modal-header">
						<button class="close" data-dismiss="modal" type="button">×</button>
						<h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
					</div>
					<div class="modal-body">
						<div class="avatar-body">
							<div class="avatar-upload">
								<input class="avatar-src" name="avatar_src" type="hidden">
								<input class="avatar-data" name="avatar_data" type="hidden">
								<label for="avatarInput" style="line-height: 35px;">图片上传</label>
								<button class="btn btn-danger" type="button" style="height: 35px;" onclick="$('input[id=avatarInput]').click();">请选择图片</button>
								<span id="avatar-name"></span>
								<input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
							<div class="row">
								<div class="col-md-9">
									<div class="avatar-wrapper"></div>
								</div>
								<div class="col-md-3">
									<div class="avatar-preview preview-lg" id="imageHead"></div>
									<!--<div class="avatar-preview preview-md"></div>
							<div class="avatar-preview preview-sm"></div>-->
								</div>
							</div>
							<div class="row avatar-btns">
								<div class="col-md-4">
									<div class="btn-group">
										<button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
									</div>
									<div class="btn-group">
										<button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
									</div>
								</div>
								<div class="col-md-5" style="text-align: right;">								
									<button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
						            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
						            </span>
						          </button>
						          <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
						            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
						              <!--<span class="fa fa-search-plus"></span>-->
						            </span>
						          </button>
						          <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
						            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
						              <!--<span class="fa fa-search-minus"></span>-->
						            </span>
						          </button>
						          <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
							            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214">
							       	    </span>
							       </button>
						        </div>
								<div class="col-md-3">
									<button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>	
		
		<div class="container" style="position: relative;margin-bottom: 100px;">
					<h1>添加用户</h1>
				
				<form class="form-horizontal" role="form"  method="post" action="addUserSuccess.php">
					<div class="form-group">
						<label class="col-sm-2 control-label">手机号:</label>
						<div class="col-sm-10">
							<input name="phone" class="form-control"  type="number" maxlength="11"  value="" placeholder="请输入手机号" required="required">
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">昵称:</label>
						<div class="col-sm-10">
							<input name="nickName" class="form-control"  type="text"  value="" placeholder="请输入昵称" required="required">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">密码:</label>
						<div class="col-sm-10">
							<input name="pwd" class="form-control"  type="password"  value="" placeholder="请输入密码" required="required">
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">微信号:</label>
						<div class="col-sm-10">
							<input name="wechat" class="form-control"  type="text"  value="" placeholder="请输入微信号">
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">职业:</label>
						<div class="col-sm-10">
							<input name="occupation" class="form-control"  type="text"  value="" placeholder="请输入职业">
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">居住城市:</label>
						<div class="col-sm-10">
							<input name="live" class="form-control" id="cityChoice" type="text"  value="" placeholder="请选择" readonly="readonly">
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">家乡:</label>
						<div class="col-sm-10">
							<input name="hometown" class="form-control" id="oldcityChoice" type="text"  value="" placeholder="请选择" readonly="readonly">
						</div>
					</div>
					
					<div class="form-group">
						<label for="" class="col-sm-2 form-control-label">收入:</label>
						<div class="col-sm-10">
							<select class="form-control" name="income">
								<option value ="1千-5千" >1千 - 5千/月</option>
							  	<option value ="5千-1万" >5千 - 1万/月</option>
							 	<option value ="1万-3万" >1万 - 3万/月</option>
							</select>
						</div>	
					</div>
					
					<div class="form-group">
						<label for="" class="col-sm-2 form-control-label">婚姻状况:</label>
						<div class="col-sm-10">
							<select class="form-control" name="marry">
								<option value ="1千-5千" >未婚</option>
							  	<option value ="5千-1万" >离异</option>
							 	<option value ="1万-3万" >丧偶</option>
							</select>
						</div>	
					</div>
					
					<div class="form-group">
						<label for="" class="col-sm-2 form-control-label">学历:</label>
						<div class="col-sm-10">
							<select class="form-control" name="education">
								<option value ="中专" >中专</option>
								<option value ="大专" >大专</option>
							  	<option value ="本科" >本科</option>
							 	<option value ="硕士" >硕士</option>
							 	<option value ="博士">博士</option>
								<option value ="高中">高中</option>
								<option value ="初中">初中</option>
							</select>
						</div>	
					</div>
					
					<div class="form-group">
						<label for="" class="col-sm-2 form-control-label">住房情况:</label>
						<div class="col-sm-10">
							<select class="form-control" name="house">
								<option value ="租房" >租房</option>
								<option value ="已购房">已购房</option>
								<option value ="单位宿舍">单位宿舍</option>
								<option value ="和家人同住" >和家人同住</option>
							</select>
						</div>	
					</div>
					
					<div class="form-group">
						<label for="" class="col-sm-2 form-control-label">身高:</label>
						<div class="col-sm-10">
							<select class="form-control" name="height">
								<?php
								 for ($i=150; $i < 280; $i++) { 
								 	echo "<option> $i 厘米</option>";
								 };
								?>
								
							</select>
						</div>	
					</div>
					
					<div class="form-group">
						<label for="" class="col-sm-2 form-control-label">体重:</label>
						<div class="col-sm-10">
							<select class="form-control" name="weight">
								<?php
								for($ii=40; $ii < 100; $ii++){
									echo "<option> $ii 公斤</option>";	
								};	
								?>
							</select>
						</div>	
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">头像:</label>
						<!--<div class="col-sm-10">
							<input  name="touxiang" class="form-control"  type="text"  value="" placeholder="请输入图片的URL" required="required">
						</div>-->
						<div class="col-sm-10">
							<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#avatar-modal">
									上传头像
							</button>
							<input  class="form-control"  type="hidden"  value="" placeholder="请输入图片的URL" required="required">
							<div class="user_pic" style="margin-top: 10px;">
								<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4244921169,2393985200&fm=200&gp=0.jpg" name="touxiang" >
							</div>
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label" style="padding-top: 68px;">更多照片:</label>
						<div class="col-sm-10">
							<input name="photo" class="form-control"  type="hidden"  value="" placeholder="请输入图片的URL" required="required">
														
							<div class="con">
						        <!--    照片添加    -->
						        <div class="z_photo">
						            <div class="z_file">
						                <input type="file" name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
						            </div>
						        </div>
						
						        <!--遮罩层-->
						        <div class="z_mask">
						            <!--弹出框-->
						            <div class="z_alert">
						                <p>确定要删除这张图片吗？</p>
						                <p>
						                    <span class="z_cancel">取消</span>
						                    <span class="z_sure">确定</span>
						                </p>
						            </div>
						        </div>
						    </div>
						        
						</div>
					</div>
					
					
					
					<div class="form-group">
						<label for="intro" class="col-sm-2 form-control-label">内心独白:</label>
						<div class="col-sm-10">
							<textarea name="intro" class="form-control" rows="3" id="intro"></textarea>
						</div>
					</div>
					
					<div class="form-group" style="padding-top: 50px;">
						<label for="sexwoman" class="col-sm-2 form-control-label">性别:</label>
						<div class="col-sm-10" style="padding-top: 10px;">
							<label class="radio-inline">
								<input type="radio" name="sex" id="sexwoman" value="0" checked> 女
							</label>
							<label class="radio-inline">
								<input type="radio" name="sex" id="sexman"  value="1"> 男
							</label>
						</div>
					</div>
					
					<!--<div class="form-group has-success" style="margin-top: 100px;">
						<label class="col-sm-2 control-label" for="inputSuccess"> 输入成功 </label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inputSuccess">
						</div>
					</div>
					<div class="form-group has-warning">
						<label class="col-sm-2 control-label" for="inputWarning"> 输入警告 </label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inputWarning">
						</div>
					</div>
					<div class="form-group has-error">
						<label class="col-sm-2 control-label" for="inputError"> 输入错误 </label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inputError">
						</div>
					</div>-->
					
					<div class="Btn" style="position: absolute;bottom: -65px;left: 50%;transform: translateX(-50%);">
						<button class="btn btn-success" type="submit"style="margin-right: 150px;">提交</button>
						<button class="btn btn-danger" type="reset">重置</button>
					</div>
				</form>
		</div>
		<script src="js/jquery-1.11.0.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/html2canvas.min.js"></script>
		<script src="js/cropper.js"></script>
		<script type="text/javascript" src="js/city-data.js"></script>
		<script type="text/javascript" src="js/hzw-city-picker.min.js"></script>
		<script src="js/sitelogo.js"></script>
		<script src="js/morePhone.js"></script>
		<script type="text/javascript">
			//城市选择
			var cityPicker = new HzwCityPicker({
			    data: data,
			    target: 'cityChoice',
			    valType: 'k-v',
			    hideCityInput: {
			        name: 'city',
			        id: 'city'
			    },
			    hideProvinceInput: {
			        name: 'province',
			        id: 'province'
			    },
			    callback: function(){
			        console.log("ok");
			    }
			});
			cityPicker.init();
			
			var cityPicker = new HzwCityPicker({
			    data: data,
			    target: 'oldcityChoice',
			    valType: 'k-v',
			    hideCityInput: {
			        name: 'city',
			        id: 'city'
			    },
			    hideProvinceInput: {
			        name: 'province',
			        id: 'province'
			    },
			    callback: function(){
			        console.log("ok");
			    }
			});
			cityPicker.init();
			$("#cityChoice,#oldcityChoice").on("click",function(){
				$("#hzw_city_picker").css("left","0");
			});
			
		</script>
		
		<script type="text/javascript">
			//做个下简易的验证  大小 格式 
			$('#avatarInput').on('change', function(e) {
				var filemaxsize = 1024 * 5;//5M
				var target = $(e.target);
				var Size = target[0].files[0].size / 1024;
				if(Size > filemaxsize) {
					alert('图片过大，请重新选择!');
					$(".avatar-wrapper").childre().remove;
					return false;
				}
				if(!this.files[0].type.match(/image.*/)) {
					alert('请选择正确的图片!')
				} else {
					var filename = document.querySelector("#avatar-name");
					var texts = document.querySelector("#avatarInput").value;
					var teststr = texts; //你这里的路径写错了
					testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
					filename.innerHTML = testend;
				}
			
			});

			$(".avatar-save").on("click", function() {
				var img_lg = document.getElementById('imageHead');
				// 截图小的显示框内的内容
				html2canvas(img_lg, {
					allowTaint: true,
					taintTest: false,
					onrendered: function(canvas) {
						canvas.id = "mycanvas";
						//生成base64图片数据
						var dataUrl = canvas.toDataURL("image/jpeg");
						var newImg = document.createElement("img");
						newImg.src = dataUrl;
						QNToken(dataUrl,0)
					}
				});
			})
			
			function QNToken(dataUrl,type){
				$.ajax({
					type:"psot",
					url:'http://127.0.0.1/marryPhphoutai/QN/index.php',
					error: function() {
						alert ("ajax请求失败");
					},
					success: function(data) {
						console.log(data);
						token = data;
						sessionStorage.setItem('token',token);
						putb64(dataUrl,token,type);

					}							
				});
			}
			
			function putb64(dataURL,token,type){
		        /*picUrl用来存储返回来的url*/
		        var picUrl;
		        /*把头部的data:image/png;base64,去掉。（注意：base64后面的逗号也去掉）*/
					picBase=dataURL.substring(22);
					picBase = picBase.substr(1);
		        /*通过base64编码字符流计算文件流大小函数*/
		        function fileSize(str) {
		            var fileSize;
		            if(str.indexOf('=')>0)  {
		                var indexOf=str.indexOf('=');
		                str=str.substring(0,indexOf);//把末尾的’=‘号去掉
		            }
		            fileSize=parseInt(str.length-(str.length/8)*2);
		            return fileSize;
		        }
		        /*把字符串转换成json*/
		        function strToJson(str) { 
		            var json = eval('(' + str + ')'); 
		            return json; 
		        } 
		        //http://upload-z2.qiniu.com/putb64/ 只适用于七牛云华南空间 因为我的是七牛云华南空间，如果不是华南空间需要根据七牛云文档进行更改
		        var url ="http://up-z0.qiniu.com/putb64/"+fileSize(picBase);
		        var xhr = new XMLHttpRequest();
				console.log(123456)
		        xhr.onreadystatechange=function(){
		
		            if (xhr.readyState==4){
		
		                var keyText=xhr.responseText;
		
		                /*返回的key是字符串，需要装换成json*/
		                keyText=strToJson(keyText);
		                /* http://image.haoqiure.com/ 是我的七牛云空间网址，keyText.key 是返回的图片文件名*/
		                picUrl="http://oz1auxyih.bkt.clouddn.com/"+keyText.key;
		                console.log(picUrl);
						
						if (type) {
							//将图片链接显示在输入框去
		                	$('.user_pic img').attr('src',picUrl );
						} else{
							for (var i = 0; i < type; i++) {
								var imgArr = [];
				              	imgArr.push(picUrl);
					            var img = document.createElement("img");
					            img.setAttribute("src", imgArr[i]);
					            var imgAdd = document.createElement("div");
					            imgAdd.setAttribute("class", "z_addImg");
					            imgAdd.appendChild(img);
					            imgContainer.appendChild(imgAdd);
							}
						}		                
		            }
		        }
//							xhr.upload.onprogress=function(ev){
//								$('.pre').text("");
//								console.log(ev.total);
//								console.log(ev.loaded);
//								var n1 = ev.loaded/ev.total;
//								var con1 = n1*100;
//								var pre1 = parseInt(con1)+"%";
//								$('.pre').text(pre1);
//							}
		        xhr.open("POST", url, true); 
		        xhr.setRequestHeader("Content-Type", "application/octet-stream");
		
		        xhr.setRequestHeader("Authorization", "UpToken "+token+"");
		        xhr.send(picBase);
		}
		</script>
	</body>
</html>